<template>
  <el-card class="box-card" shadow="never" style="margin-left: 20px">
    <div slot="header" class="clearfix">
      <span>收到的赞</span>
    </div>

    <!-- 回复我的 列表渲染 -->
    <div class="msg-container" v-if="!noneMsgFlag">
      <div v-for="item in dataList" :key="item.data.id" class="demo-type">
        <el-badge
          is-dot
          class="item"
          :hidden="item.data.readFlag ? true : false"
        >
        </el-badge>
        <div style="display: flex">
          <router-link
            :to="{
              path: targetPersonCenter,
              query: {
                id: item.userDTO.data.userId,
              },
            }"
            target="_blank"
          >
            <el-avatar :size="50">
              <img
                src="@/assets/szptImages/images/builderHeader.png"
                v-show="!item.userDTO.data.avatar"
              />
              <img
                :src="item.userDTO.data.avatar"
                v-show="item.userDTO.data.avatar"
              /> </el-avatar
          ></router-link>
          <div class="info username" style="color: #00b7ff">
            <router-link
              :to="{
                path: targetPersonCenter,
                query: {
                  id: item.userDTO.data.userId,
                },
              }"
              target="_blank"
            >
              @{{ item.userDTO.data.userName }}
            </router-link>
          </div>
          <div class="info info-title">
            {{ judgePostComment(item.data.targetEntityType) }}
          </div>
          <div class="info info-title date">{{ item.data.createTime }}</div>
        </div>

        <div class="data-box">
          <div class="comment-box">
            <div class="post-container" v-if="showBox(item.targetEntityType)">
              <router-link
                :to="{
                  name: targetSzSource,
                  query: {
                    id: item.targetEntity.data.id,
                  },
                }"
              >
                {{ item.targetEntity.data.title }}
              </router-link>
            </div>
            <div
              class="post-container"
              v-if="!showBox(item.data.targetEntityType)"
            >
              <div class="comment-detail">
                <router-link
                  :to="{
                    name: targetSzSource,
                    query: {
                      id: item.targetEntity.data.entityId,
                    },
                  }"
                >
                  {{ item.targetEntity.data.content }}
                </router-link>
              </div>
            </div>
          </div>
          <div class="hook-box"></div>
        </div>
      </div>
      <div class="load-msg" @click="loadMsgMore()">
        {{ loadMoreMsg ? `点击加载更多...` : `暂无更多数据` }}
      </div>
    </div>
    <div class="msg-container" v-if="noneMsgFlag">
      <noneDataPage></noneDataPage>
    </div>
  </el-card>
</template>

<script>
import { getList } from "../../../api/szpt/MsgPage/ReplayMeMsg";
import noneDataPage from "@/components/szptPage/noneDataPage/index.vue";

export default {
  data() {
    return {
      dataList: {},
      //  个人中心路由
      targetPersonCenter: "szptPersonalCenter",
      //   帖子详情路由
      targetSzSource: "szSource",
      searchForm: {
        actionType: "LIKE",
        notifyType: "REMIND",
        pageSize: 10,
        pageNum: 1,
        nextSearchAfter: [],
      },
      //   加载数据标识
      loadMoreMsg: true,
      //   没有消息数据标识
      noneMsgFlag: false,
    };
  },
  components: {
    noneDataPage,
  },
  methods: {
    // 加载更多数据
    loadMsgMore() {
      this.$modal.loading("玩命加载中...");
      this.searchForm.pageNum = this.searchForm.pageNum + 1;
      getList(this.searchForm)
        .then((res) => {
          if (res.code === 200 && res.data) {
            this.dataList = this.dataList.concat(res.data.pageInfo.list);
            this.searchForm.nextSearchAfter = res.data.markInfo.nextSearchAfter;
          } else if (res.code === 200) {
            this.loadMoreMsg = false;
          }
          this.$modal.closeLoading();
        })
        .catch((err) => {
          console.log(err);
          this.$modal.closeLoading();
        });
    },
    // 判断该回复是评论还是帖子
    judgePostComment(data) {
      if (data === "com.ruoyi.szpt.sz_post.domain.SzPost") {
        return "点赞了我的帖子";
      } else if (data === "com.ruoyi.szpt.Comment.domain.SzComment") {
        return "点赞了我的评论";
      }
    },
    showBox(data) {
      if (data === "com.ruoyi.szpt.sz_post.domain.SzPost") {
        return true;
      } else if (data === "com.ruoyi.szpt.Comment.domain.SzComment") {
        return false;
      }
      return true;
    },
    // 初始化数据
    initData() {
      this.$modal.loading("玩命加载中...");
      getList(this.searchForm)
        .then((res) => {
          if (res.code === 200 && res.data) {
            this.dataList = res.data.pageInfo.list;
            this.searchForm.nextSearchAfter = res.data.markInfo.nextSearchAfter;
            this.$modal.closeLoading();
          } else if (res.code === 200) {
            this.noneMsgFlag = true;
          }
          this.$modal.closeLoading();
        })
        .catch((err) => {
          console.log(err);
          this.$modal.closeLoading();
        });
    },
    errorHandler() {
      return true;
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.info-title {
  color: gray;
  font-size: small;
}
.msg-container {
  width: 100%;
  min-height: 500px;
}
.data-box {
  padding: 0px 30px 0px 60px;
  .comment-box {
    width: 100%;
    height: auto;
    .post-container {
      height: auto;
      font-weight: bold;
      padding: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #666;
      background-color: rgb(247, 248, 252);
      .comment-detail {
        width: 100%;
        font-weight: normal;
        color: #00b7ff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .post-container:hover {
      color: #00b7ff;
    }
  }
  .hook-box {
    height: auto;
    padding: 10px;
  }
}
.load-msg {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #00b7ff;
  cursor: pointer;
}
.load-msg:hover {
  color: #00b7ff;
  background-color: rgb(247, 248, 252);
}
.date {
  margin-left: 40%;
}
</style>
